<template>
	<div class="app-creat-template">
		<!--新建模板step3-->
		<el-card shadow="never">
			
			<el-tabs v-model="activeTab" type="border-card" >
				
			  <el-tab-pane v-if="!(tabHideList.indexOf('0')>-1)" name="0" label="部署模式" style="padding: 20px;">
			  	
			  	<deployModel 
			  		ref="deployModel"
			  		@change="deployModelChange"
			  		></deployModel>
			  	
			  </el-tab-pane>
			 
			  <el-tab-pane v-if="!(tabHideList.indexOf('2')>-1)" name="2" label="配置文件" style="padding: 20px;">
			  	
			  	<configFile
			  		ref="configFile"
			  		:autoAddList="true"
			  		@change="templateConfigsChange"
			  		></configFile>
			  	
			  </el-tab-pane>
			  <el-tab-pane v-if="!(tabHideList.indexOf('3')>-1)" name="3" label="端口映射" style="padding: 20px;">
			  	<port
			  		ref="port"
			  		:autoAddList="true"
			  		@change="portConfigsChange"
			  		></port>
			  </el-tab-pane>
			  <el-tab-pane v-if="!(tabHideList.indexOf('4')>-1)" name="4" label="环境变量" style="padding: 20px;">
			  	<env
			  		ref="env"
			  		:autoAddList="true"
			  		@change="envConfigsChange"
			  		></env>
			  </el-tab-pane>
			  <el-tab-pane v-if="!(tabHideList.indexOf('5')>-1)" name="5" label="卷挂载" style="padding: 20px;">
			  	<volume
			  		ref="volume"
			  		:autoAddList="true"
			  		@change="volumeConfigsChange"
			  		></volume>
			  </el-tab-pane>

				 <el-tab-pane v-if="!(tabHideList.indexOf('1')>-1)" name="1" label="关联应用" style="padding: 20px;">
			  	
			  	<activeTemplate
			  		ref="activeTemplate"
			  		:autoAddList="true"
			  		@change="relaInfoChange"
			  		>
			  	</activeTemplate>
			  	
			  </el-tab-pane>
			  
			</el-tabs>
			
			
			<el-row style="margin-top: 20px;">
				<el-col :span="12">
					<el-button  @click="goPrev"  size="small">上一步</el-button>
				</el-col>
				<el-col :span="12" align="right">
					<el-button :disabled="loading"  @click="submit" type="primary" size="small">构建模板</el-button>
				</el-col>
			</el-row>
			
		</el-card>
			
	</div>
</template>

<script>

import deployModel from "../common/deployModel" ;
import activeTemplate from "../common/activeTemplate" ;
import configFile from "../common/configFile" ;
import port from "../common/port" ;
import env from "../common/env" ;
import volume from "../common/volume" ;


export default {
	props: [
		"deployType"
	],
	components: {
		deployModel ,
		activeTemplate,
		configFile,
		port,
		env,
		volume,
	},
	data() {
		return {
			loading:false,
			activeTab : "2" ,
			tabHideList : [],
			formData : {
				templateConfigs : [],
				varsInfoPort:[],
				varsInfoEnv:[],
				varsInfoVolume:[],
				varsInfo:[], // 以上3个arr结合得来
			},
		}
	},
	mounted() {
		if(this.deployType&&this.deployType==2){
			// 裸应用时
			this.tabHideList=["3","5"];
		}
	},
	methods: {
		init(formData){
			console.log(formData);
			this.formData.appType = formData.appType;
			this.$refs.deployModel.initdeployModelList(formData.appType)
		},
		
		
		deployModelChange(name,v ,list){
			
			console.log("部署模式改变：" , v)
			this.formData.spec = v ;
			if(list&&list.length==1&&list[0].sourceData.deployModel==0){
				// 为默认单机模式 隐藏tab
				this.tabHideList.push("0");
			}else{
				// 解除隐藏tab
				let index = this.tabHideList.indexOf("0");
				this.tabHideList.splice(index,1)
			}
			
				
				// 变更时 重取配置文件
				this.$refs.configFile&&this.$refs.configFile.init({
					deployModel : this.formData.spec.deployModel,
					deployType : this.$route.query.deployType ,
					appType : this.formData.appType,
				})
				
				// 变更时 重取端口映射
				this.$refs.port&&this.$refs.port.init({
					deployModel : this.formData.spec.deployModel,
					deployType : this.$route.query.deployType ,
					appType : this.formData.appType,
				})
				
				// 变更时 重取环境变量
				this.$refs.env&&this.$refs.env.init({
					deployModel : this.formData.spec.deployModel,
					deployType : this.$route.query.deployType ,
					appType : this.formData.appType,
				})
			
			
		},
		
		relaInfoChange(name,v){
			this.formData.relaInfo = v ;
		},
		
		templateConfigsChange(name,v){
			this.formData.templateConfigs = v ;
		},
		
		portConfigsChange(name,v){
			this.formData.varsInfoPort = v ;
			this.concatVarsInfo()
		},
		
		envConfigsChange(name,v){
			this.formData.varsInfoEnv = v ;
			this.concatVarsInfo()
		},
		
		volumeConfigsChange(name,v){
			this.formData.varsInfoVolume = v ;
			this.concatVarsInfo()
		},
		
		concatVarsInfo(){
			this.formData.varsInfo = [
				...this.formData.varsInfoPort,
				...this.formData.varsInfoEnv,
				...this.formData.varsInfoVolume,
			]
		},
		
		
		goPrev(){
			this.$emit("goPrev");
		},
		submit(){
			this.loading = true ;
			this.$emit("submit",this.formData);
		},
		resetLoading(){
			this.loading = false ;
		}
	},
	watch : {
		tabHideList(n,o){
			const getNowTab = ()=>{
				if(n&&n.indexOf(this.activeTab)>-1){
					this.activeTab = (Number(this.activeTab) + 1).toString();
					if(this.activeTab>5){
						this.activeTab = "0" ;
					}
					getNowTab()
				}
			}
			getNowTab();
		}
	}
}
</script>

<style>
</style>